import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { message } from 'antd';

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

import '../styles/markdown.module.scss'
import '../styles/AudioWave.css';


interface CodeBlockProps {
  language: string;
  code: string;
}

const CodeBlock: React.FC<CodeBlockProps> = ({ language, code }) => {
  const [messageApi, contextHolder] = message.useMessage();

  const handleCopy = () => {
    messageApi.success('代码已复制到剪贴板');
  };

  return (
    <div className="relative text-white rounded-md hide-scrollbar">
      {contextHolder}
      <div className="flex items-center justify-between px-2 pt-2 pb-2" style={{background:"#50505a"}}>
        <div className="">
          <span className="">{language}</span>
        </div>
        <CopyToClipboard text={code} onCopy={handleCopy}>
          <button className="ml-auto">
            复制
          </button>
        </CopyToClipboard>
      </div>
      {/* <hr/> */}
      <div style={{
        borderTop: "1px solid #50505a"
      }}></div>
      <SyntaxHighlighter language={language} style={tomorrow}>
        {code}
      </SyntaxHighlighter>
    </div>
  );
};

export default CodeBlock;